<template>
  <div id="content">
    <ul class="legend">
        <li>
            <div><span class="iconfont">&#xe88d;</span></div>
            <span>空闲</span>
        </li>
        <li>
            <div><span class="iconfont">&#xe88d;</span></div>
            <span>点餐中</span>
        </li>
        <li>
            <div><span class="iconfont">&#xe88d;</span></div>
            <span>用餐中</span>
        </li>
    </ul>
    <ul class="table">
        <li
        v-for="(item,index) in seatList"
        :key="item.seat_id"
        :class="item.legend_class"
        >
          <div class="icon"  @click="reserve(index)"><span class="iconfont">&#xe88d;</span></div>
          <span>{{item.seat_id}}号桌</span>
        </li>
    </ul>
    <!-- 输入人数的组件 -->
    <el-dialog title="请输入人数" :visible.sync="dialogFormVisible" :append-to-body="true" width="30%" top="30vh">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="人数" prop="peopleNum">
          <el-input v-model.number="ruleForm.peopleNum"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTime } from '@/utils/getTime.js'
import { getSeatInfoAPI } from '@/api/getSeatInfoAPI.js'
import { setSeatAPI } from '@/api/setSeatAPI.js'
export default {
  name: 'seats',
  data () {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('人数不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value > 10) {
            callback(new Error('人数不能超过10人'))
          } else if (value < 1) {
            callback(new Error('人数至少1人'))
          } else {
            callback()
          }
        }
      }, 100)
    }
    return {
      seatList: [],
      currentTable: '',
      avltimer: null,
      dialogFormVisible: false,
      ruleForm: {
        peopleNum: ''
      },
      rules: {
        peopleNum: [
          { validator: checkAge, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          this.success()
          this.setSeat()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    success () {
      this.$message({
        message: '选座成功, 即将跳转点餐页面...',
        type: 'success'
      })
    },
    warn () {
      this.$message({
        message: '正在就餐中, 暂不能点菜',
        type: 'warning'
      })
    },
    async reserve (i) {
      switch (this.seatList[i].legend_class) {
        case 'eating': {
          this.warn()
          break
        }
        case 'ordering': {
          const token = localStorage.getItem('token')
          const data = { ...this.seatList[i], is_selected: 1 }
          await setSeatAPI(token, data)
          this.$router.push('/index/category')
          break
        }
        case '': {
          this.currentTable = i + 1
          this.dialogFormVisible = true
          this.resetForm('ruleForm')
          break
        }
      }
    },
    async setSeat () {
      const token = localStorage.getItem('token')
      const data = {
        seat_id: this.currentTable,
        seat_legend: '点餐中',
        people_num: this.ruleForm.peopleNum,
        legend_class: 'ordering',
        is_selected: 1,
        order_num: getTime().orderCode
      }
      await setSeatAPI(token, data)
      setTimeout(() => {
        this.$router.push('/index/category')
      }, 3000)
    },
    async getSeatInfo () {
      const token = localStorage.getItem('token')
      const { data: res } = await getSeatInfoAPI(token)
      this.seatList = res.data
    }
  },
  created () {
    this.avltimer = setInterval(() => {
      // console.log('seats创建了')
      this.getSeatInfo()
    }, 50)
  },
  beforeDestroy () {
    // console.log('seats销毁了')
    clearInterval(this.avltimer)
    this.avltimer = null
  }
}
</script>

<style scoped>
#content{
    position: fixed;
    top: 80px;
    right: 20px;
    bottom: 20px;
    left: 300px;
    background: rgba(255, 255, 255, .2);
    box-sizing: border-box;
    padding: 10px;
    overflow-y:auto;
}
.alert {
  width: 850px;
  position: fixed;
  left: 620px;
  top: 20px;
}
.legend{
    color: #fff;
    display: flex;
    justify-content: flex-end;
    padding-top: 30px;
}
.legend li{
    display: flex;
    margin-right: 30px;
    align-items: center;
}
.legend li div{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
}
.legend li div span{
    font-size: 25px;
}
.legend li:nth-child(1) div, .table .icon{
    background: #66a8a6;
}
.legend li:nth-child(2) div, .table .ordering .icon{
    background: #f79700;
}
.legend li:nth-child(3) div, .table .eating .icon{
    background: #e5553f;
}

.table{
    width: 90%;
    margin: 40px auto 0;
}
.table li{
    display: inline-block;
    text-align: center;
    margin: 0 37px 50px;
    cursor: pointer;
    color: #fff;
}
.table .icon{
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.table .icon span{
    font-size: 80px;
}

/* .warn {
  position:fixed;
  left: 880px;
  top: 440px;
  width: 355px;
  height: 80px;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  z-index: 5;
  cursor: default;
}
.warn p {
  color: rgb(129, 128, 128);
  font-size: 16px;
  text-align: left;
  margin-top: 10px;
}
.warn .determine {
  position:absolute;
  bottom:5px;
  right: 5px;
} */
</style>
